<script setup>
import { useECharts } from '../../../utils/useECharts.js'
import { vegetableECharts } from '../../../utils/vegetableECharts.js'
import { plantingTimeECharts } from '../../../utils/plantingTimeECharts.js'
// 绘制图表
useECharts('myEcharts')
vegetableECharts('vegetableECharts')
plantingTimeECharts('plantingTimeECharts')
</script>

<template>
  <div class="card-container">
    <div class="left-card">
      <el-card header="数据" :body-style="{ height: '500px' }">
        <!-- 这里是左边卡片内容 -->
        <div class="container">
          <div
            id="myEcharts"
            class="item"
            :style="{ width: '430px', height: '300px' }"
          ></div>
          <div
            class="item"
            :style="{ width: '430px', height: '300px' }"
            id="vegetableECharts"
          >
            <strong>菜地品种</strong>
          </div>
        </div>
        <div
          class="item"
          :style="{ width: '100%', height: '170px' }"
          id="plantingTimeECharts"
        ></div>
      </el-card>
    </div>
  </div>
</template>

<style>
.item {
  width: 100px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgb(238, 241, 241);
  transition: all 0.3s ease; /* 添加过渡效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.item:hover {
  background-color: lightgreen; /* 鼠标悬停时改变背景颜色 */
  transform: scale(1.1); /* 鼠标悬停时放大 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
.container {
  display: flex;
  justify-content: space-between;
}
.card-container {
  display: flex; /* 使用 Flex 布局 */
}

.left-card {
  flex: 8; /* 左边占据 80% 的宽度 */
  margin-right: 20px; /* 可选：设置左右间距 */
}
</style>
